.transform-translate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: center;
  height: 200px;

  .container {
    width: 100px;
    height: 100px;
    margin: 20px;
    background-color: #c9c9c9;
  }

  .item {
    width: 100px;
    height: 100px;
    opacity: 0.5;
    background-color: #bae7ff;
  }

  .single-value-pixel {
    transform: translate(100px);
  }

  .single-value-percentage {
    transform: translate(50%);
  }

  .two-values {
    transform: translate(80px, 50%);
  }

  .three-values {
    transform: translate3d(50%, 105px, 5rem);
  }
}
